<tbody>
<tr> 
	<td><h3>Liste des fournisseur</h3></td>
</tr>
<tr>    
    <!-- Feedback message zone -->
	<td><div id="message"></div></td>
</tr>
<tr>    
    <td><div id="tablecontent">
    	<table class="testgrid">
    	</table>
    </div></td>
</tr>    
<tr>      
    <td><div id="tablecontentSecondaire">
    	<table class="testgridSecondaire">
    	</table>
    </div></td>
</tr>
</tbody>

<script language="javascript" type="text/javascript" src="authent/login.js"></script>
<script src="../EditableGrid/editablegrid.js"></script>
		<!-- [DO NOT DEPLOY] --> <script src="../EditableGrid/editablegrid_renderers.js" ></script>
		<!-- [DO NOT DEPLOY] --> <script src="../EditableGrid/editablegrid_editors.js" ></script>
		<!-- [DO NOT DEPLOY] --> <script src="../EditableGrid/editablegrid_validators.js" ></script>
		<!-- [DO NOT DEPLOY] --> <script src="../EditableGrid/editablegrid_utils.js" ></script>
		<!-- [DO NOT DEPLOY] --> <script src="../EditableGrid/editablegrid_charts.js" ></script>
		<link rel="stylesheet" href="../EditableGrid/editablegrid.css" type="text/css" media="screen"> 
       
		<style>
			body { font-family:'lucida grande', tahoma, verdana, arial, sans-serif; font-size:11px; }
			h1 { font-size: 15px; }
			a { color: #548dc4; text-decoration: none; }
			a:hover { text-decoration: underline; }
			table.testgrid { border-collapse: collapse; border: 1px solid #CCB; width: 800px; }
			table.testgrid td, table.testgrid th { padding: 5px; border: 1px solid #E0E0E0; }
			table.testgrid th { background: #E5E5E5; text-align: left; }
			input.invalid { background: red; color: #FDFDFD; }
		</style>
               
		<script>
		// helper function to get path of a demo image
		function image(relativePath) {
			return "images/" + relativePath;
		}
		
		var metadata = [];
		var metadataSecondaire = [];
		var data = [];
		var dataSecondaire = [];
		var dataToLoad = [];
	
		window.onload = function() {

		// this approach is interesting if you need to dynamically create data in Javascript 
		metadata.push({ name: "idFournisseur", label: "Id", datatype: "integer", editable: false});
		metadata.push({ name: "enseigne", label: "Enseigne", datatype: "string", editable: true});
		metadata.push({ name: "raison_sociale", label:"Raison sociale", datatype: "string", editable: true});
		metadata.push({ name: "site_web", label: "Site Web", datatype: "string", editable: true});
		metadata.push({ name: "adresse", label: "Adresse", datatype:"string", editable:true});
		metadata.push({ name: "complement_adresse", label:"Complément adresse", datatype: "string", editable: true});
		metadata.push({ name: "code_postal", label: "Code postal", datatype: "integer", editable: true});
		metadata.push({ name: "commune", label: "Commune", datatype: "string", editable: true});
		metadata.push({ name: "perimetre_intervention", label: "Périmètre intervention", datatype: "string", editable: true});
		metadata.push({ name: "commentaire", label: "Commentaire", datatype: "string", editable: true});
		metadata.push({ name: "type_reglement", label:"type_reglement", datatype: "string", editable: true});
		metadata.push({ name: "delais_reglement", label: "Delai règlement", datatype: "integer", editable: true});
		metadata.push({ name: "remise", label:"Remise", datatype: "double(%,2)", editable: true});
		metadata.push({ name: "specificite_remise", label:"Spécificité remise", datatype: "string", editable: true});
		metadata.push({ name: "mode_paiement", label:"Mode Paiement", datatype: "string", editable: true});
		metadata.push({ name: "date_inscription", label:"Date inscription", datatype: "date", editable: false});
		metadata.push({ name:"action", label:"", datatype:"html", bar:true, editable:false, values:null});
		
		<?php $i=1 ; ?>
		   <?php foreach ( $listeFournisseur as $fournisseur ) {?>
			data.push({id: <?php echo $i ?>,
			 values: {"idFournisseur": "<?php echo htmlentities($fournisseur['idFournisseur'], ENT_QUOTES,"UTF-8") ?>",
			 "enseigne": "<?php echo $fournisseur['enseigne'] ?>",
			 "raison_sociale": "<?php echo $fournisseur['raison_sociale'] ?>",
			 "site_web": "<?php echo $fournisseur['site_web'] ?>",
			 "adresse": "<?php echo $fournisseur['adresse'] ?>",
			 "complement_adresse": "<?php echo $fournisseur['complement_adresse'] ?>",
			 "code_postal": "<?php echo $fournisseur['code_postal'] ?>",
			 "commune": "<?php echo $fournisseur['commune'] ?>",
			 "perimetre_intervention": "<?php echo $fournisseur['perimetre_intervention'] ?>",
			 "commentaire": "<?php echo $fournisseur['commentaire'] ?>",
			 "type_reglement": "<?php echo $fournisseur['type_reglement'] ?>",
			 "delais_reglement": "<?php echo $fournisseur['delais_reglement'] ?>",
			 "remise": "<?php echo $fournisseur['remise'] ?>",
			 "specificite_remise": "<?php echo $fournisseur['specificite_remise'] ?>",
			 "mode_paiement": "<?php echo $fournisseur['mode_paiement'] ?>",
			 "date_inscription": "<?php echo $fournisseur['date_inscription'] ?>",
			 
			 "action":""}});		
			 <?php $i=$i+1 ; ?>
   		<?php } ?>
		
		// Définition variable header tableau secondaire		
		metadataSecondaire.push({ name: "idFournisseur", label: "Id", datatype: "integer", editable: false});
		metadataSecondaire.push({ name: "interlocuteur1", label: "Interlocuteur 1", datatype: "string", editable: true});
		metadataSecondaire.push({ name: "email_interlocuteur1", label: "Email interlocuteur 1", datatype: "string", editable: true});
		metadataSecondaire.push({ name: "tel_fixe_interlocuteur1", label: "Tel. Fixe.", datatype: "string", editable: true});
		metadataSecondaire.push({ name: "tel_mobile_interlocuteur1", label: "Tel. Mobile", datatype: "string", editable: true});
		metadataSecondaire.push({ name: "fonction_interlocuteur1", label:"Fonction_interlocuteur 1", datatype: "string", editable: true});
		metadataSecondaire.push({ name: "interlocuteur2", label: "Interlocuteur 2", datatype: "string", editable: true});
		metadataSecondaire.push({ name: "email_interlocuteur2", label: "Email interlocuteur 2", datatype: "string", editable: true});
		metadataSecondaire.push({ name: "tel_fixe_interlocuteur2", label: "Tel. Fixe.", datatype: "string", editable: true});
		metadataSecondaire.push({ name: "tel_mobile_interlocuteur2", label: "Tel. Mobile", datatype: "string", editable: true});
		metadataSecondaire.push({ name: "fonction_interlocuteur2", label:"Fonction_interlocuteur 2", datatype: "string", editable: true});
		
		// Chargement de l'ensemble des données du tableau secondaire 
		<?php $i=1 ; ?>		
		 <?php foreach ( $listeFournisseur as $fournisseur ) {?>
			dataSecondaire.push({id: <?php echo $i ?>,
			 values: {"idFournisseur": "<?php echo htmlentities($fournisseur['idFournisseur'], ENT_QUOTES,"UTF-8") ?>",
			 "interlocuteur1": "<?php echo $fournisseur['interlocuteur1'] ?>",
			 "email_interlocuteur1": "<?php echo $fournisseur['email_interlocuteur1'] ?>",
			 "tel_fixe_interlocuteur1": "<?php echo $fournisseur['tel_fixe_interlocuteur1'] ?>",
			 "tel_mobile_interlocuteur1": "<?php echo $fournisseur['tel_mobile_interlocuteur1'] ?>",
			 "fonction_interlocuteur1": "<?php echo $fournisseur['fonction_interlocuteur1'] ?>",
			 "interlocuteur2": "<?php echo $fournisseur['interlocuteur2'] ?>",
			 "email_interlocuteur2": "<?php echo $fournisseur['email_interlocuteur2'] ?>",
			 "tel_fixe_interlocuteur2": "<?php echo $fournisseur['tel_fixe_interlocuteur2'] ?>",
			 "tel_mobile_interlocuteur2": "<?php echo $fournisseur['tel_mobile_interlocuteur2'] ?>",
			 "fonction_interlocuteur2": "<?php echo $fournisseur['fonction_interlocuteur2'] ?>"
					 }});
 			 <?php $i=$i+1 ; ?>
		<?php } ?> 		

		editableGrid = new EditableGrid("FournisseurGrid", {
			
			saveOnBlur: false,
			tableLoaded: function() { 

				// display a message
				document.getElementById("message").innerHTML = "<p class='ok'>Ready!</p>";
				// render the grid
				this.renderGrid("tablecontent", "testgrid");
			
			},				
			// Function de modification d'une valeur 
			modelChanged: function(rowIdx, colIdx, oldValue, newValue, row) {
						
			columnName = this.getColumnName(colIdx);
			idUtilisateur = this.getValueAt(rowIdx, editableGrid.getColumnIndex("idFournisseur"));
				
			document.getElementById("message").innerHTML = "<p class='ok'>Modification de : ''"+ oldValue +"' par '" + newValue + "'</p>";
			// Appel à la modification du service
		
			window.location = "espace_administration.php?onglet=administration&page=gestion_fournisseur&action=modification&updateId="+parseInt(idUtilisateur)+"&attribute="+columnName+"&value="+newValue;
			}
		});
		
		secondaryEditableGrid = new EditableGrid("FournisseurInterlocuteurGrid", {
				
			saveOnBlur: false,
			tableLoaded: function() { 

				// display a message
				_$("message").innerHTML = "<p class='ok'>Ready!</p>";
				// render the grid
				this.renderGrid("tablecontentSecondaire", "testgridSecondaire");
			
			},				
			// Function de modification d'une valeur 
			modelChanged: function(rowIdx, colIdx, oldValue, newValue, row) {
						
			columnName = this.getColumnName(colIdx);
			idUtilisateur = this.getValueAt(rowIdx, secondaryEditableGrid.getColumnIndex("idFournisseur"));
					
			document.getElementById("message").innerHTML = "<p class='ok'>Modification de : ''"+ oldValue +"' par '" + newValue + "'</p>";
			// Appel à la modification du service
			window.location = "espace_administration.php?onglet=administration&page=gestion_fournisseur&action=modification&updateId="+parseInt(idUtilisateur)+"&attribute="+columnName+"&value="+newValue;
			}
		});
		
		editableGrid.load({"metadata": metadata, "data": data});							
		secondaryEditableGrid.load({"metadata": metadataSecondaire, "data": dataToLoad});
		// CellRenderer pour suppression d'un valeur
		editableGrid.setCellRenderer("action", new CellRenderer({render: function(cell, value) {
			// this action will remove the row, so first find the ID of the row containing this cell 
			rowId = cell.rowIndex;
			idUtilisateur = editableGrid.getValueAt(rowId, editableGrid.getColumnIndex("idFournisseur"));

			cell.innerHTML = "<a onclick=\"if (confirm('Etes vous sur de vouloir supprimer cet utilisateur ? ')) { editableGrid.remove(" + cell.rowIndex + "); window.location.href='espace_administration.php?onglet=administration&page=gestion_fournisseur&action=suppression&delCode="+idUtilisateur +"';} \" style=\"cursor:pointer\">" +
			 "<img src=\"" + image("delete.png") + "\" border=\"0\" alt=\"supprimer\" title=\"Supprimer Service\"/></a>";
			 
			 cell.innerHTML += "&nbsp;<a onclick=\"afficherDetail(" + cell.rowIndex + ");\" style=\"cursor:pointer\">" +
			 "<img src=\"" + image("loupe.png") + "\" border=\"0\" alt=\"infos\" title=\"Plus d'infos\"/></a>";
			 
		}})); 
		
		editableGrid.renderGrid("tablecontent", "testgrid");	
		secondaryEditableGrid.renderGrid("tablecontentSecondaire", "testgridSecondaire");
		}
		
		function afficherDetail(colonneId) {			
			dataToLoad = [];
			dataToLoad.push(dataSecondaire[colonneId]);
			secondaryEditableGrid.load({"metadata": metadataSecondaire, "data": dataToLoad});
			secondaryEditableGrid.renderGrid("tablecontentSecondaire", "testgridSecondaire");	
		} 
		
	</script>
